<template>
  <div>
    <el-input
      v-model="deptName"
      placeholder="请输入部门名称"
      clearable
      size="small"
      prefix-icon="el-icon-search"
      style="margin-bottom: 20px"
    />
    <el-tree
      :data="deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      default-expand-all
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getDataTree } from "@/api/system/dept";
import PortraitTool from "../utils/portrait-tool"
export default {
  name: "DeptTree",
  // props: [""],
  components: {},
  data() {
    return {
      deptName: "",
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  methods: {
    /** 查询部门树结构 */
    getDeptTree() {
      getDataTree().then((response) => {
        this.deptOptions = PortraitTool.toTreeData(response.data.datas.filter(i => {return i.id != '0000000000000000'}),['x','y']);
        console.log(123,this.deptOptions)
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit('nodeClick',data)
    },
  },

  mounted() {
    this.getDeptTree();
  },
};
</script>

<style scoped lang="scss">
</style>
